<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>click延时</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            text-align: center;
            background-color: #F7F7F7;
        }
        .result {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            margin: 100px auto 0;
            border: 1px solid #CCC;
        }
    </style>
</head>

<body>
    <div class="result">
        点我试试
    </div>
    <script>
        var startTime;

        // 打印信息函数
        var log = function (msg) {
            // 创建DOM结点，显示信息
            var div = document.createElement('div');

            // 计算触发时间
            /*new Date().getTime():获取当前时间*/
            div.innerHTML = (new Date().getTime()) + ': ' + (new Date().getTime() - startTime) + ': ' + msg;
            // 添加到页面中
            document.body.appendChild(div);
        };

        // 触屏开始
        /*因为这个事件是最先触发的*/
        var touchStart = function () {
            startTime = new Date().getTime();

            log('touchStart');
        };

        // 触屏结束
        var touchEnd = function () {
            log('touchEnd');
        };

        // 鼠标按下
        var mouseDown = function () {
            log('mouseDown');
        };

        // 鼠标点击
        var mouseClick = function () {
            log('mouseClick');
        };

        // 鼠标抬起
        var mouseUp = function () {
            log('mouseUp');
        };

        // 添加事件元素
        var result = document.querySelector('.result');

        // 分别绑订事件
        result.addEventListener('mousedown', mouseDown);
        result.addEventListener('click', mouseClick);
        result.addEventListener('mouseup', mouseUp);
        result.addEventListener('touchstart', touchStart);
        result.addEventListener('touchend', touchEnd);

    </script>
</body>

</html>